<template>
  <main class="no-goods">
    <el-dialog v-model:dialogVisible="dialogVisible" @close="dialogClose" :width="600" v-model="dialogVisible" draggable :title="dialogTitle">
      <el-form :model="formMy" :label-width="formLabelWidth">
        <el-form-item label="创建人: ">
          {{ store.state.user.username }}
        </el-form-item>
        <el-form-item label="渠道类型：">
          <el-radio-group v-model="formMy.type">
            <el-radio :label="1" size="large">固定渠道</el-radio>
            <el-radio :label="0" size="large">临时活动</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="渠道名称: ">
          <el-input v-model="formMy.title" placeholder="请输入一级渠道名称" />
        </el-form-item>
        <el-form-item label="渠道星级：">
          <el-rate v-model="formMy.level" allow-half />
        </el-form-item>
        <el-form-item label="备注: ">
          <el-input v-model="formMy.description" type="textarea" :rows="3" placeholder="可用于来源信息描述，不超过100字符数" />
        </el-form-item>
        <el-form-item label="状态: ">
          <el-switch v-model="formMy.statusInput" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmAdd">确定</el-button>
          <el-button type="primary" @click="cancelDel">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </main>
</template>

<script lang="ts" setup>
import { reactive, defineProps, toRefs, defineEmits, watch, toRaw } from "vue";
import { useStore } from "vuex";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
const formLabelWidth = "160px";
const store = useStore();

const props = defineProps({
  dialogVisible: {
    default: () => false,
    require: true
  },
  dialogTitle: {
    type: String,
    default: "",
    require: true
  },
  dialogTableValue: {
    type:Object,
    default: () => {}
  }
});
const { dialogVisible } = toRefs(props);
const emit = defineEmits(["update:dialogVisible", "confirmHandle"]);
// interface IListForm {
//   description: string;
//   id: number;
//   level: number;
//   status: number;
//   type: number;
//   statusInput: boolean;
//   title: string;
// }
const formMy = reactive({
  // 表单数据
  description: "",
  level: 0,
  status: 0,
  type: 0,
  statusInput: false,
  title: ""
});
let formId:number;
const confirmAdd = () => {
  // 添加数据，确认
  console.log("确定");
  if(props.dialogTitle==='新增来源'){
    formMy.statusInput ? (formMy.status = 0) : (formMy.status = 1);
    baseService.post("/channel/addChannelInfo", formMy).then((res) => {
      console.log(res, "测试接口");
      if (res?.code === 200) {
        ElMessage({
          message: "数据添加成功",
          type: "success"
        });
        confirmHandle(); // 告诉父组件更新表格
      } else {
        ElMessage({
          message: "数据添加失败",
          type: "warning"
        });
      }
    });
  }else{
    formMy.statusInput ? (formMy.status = 0) : (formMy.status = 1);
    let formData ={...formMy,id:formId}
    baseService.post("/channel/updateChannel", formData).then((res) => {
      console.log(res, "测试接口");
      if (res?.code === 200) {
        ElMessage({
          message: "数据编辑成功",
          type: "success"
        });
        confirmHandle(); // 告诉父组件更新表格
      } else {
        ElMessage({
          message: "数据编辑失败",
          type: "warning"
        });
      }
    });
  }

  dialogClose();
};
const confirmHandle = () => {
  emit("confirmHandle", true);
};
const cancelDel = () => {
  console.log("取消");
  dialogClose();
};
const dialogClose = () => {
  emit("update:dialogVisible", false);
};
watch(
  () => props.dialogTableValue,
  () => {
    console.log(props.dialogTableValue);
    let dialogTableValue = JSON.parse(JSON.stringify(props.dialogTableValue));
    dialogTableValue.statusInput = dialogTableValue.status ? true : false;
    // formMy = props.dialogTableValue
    formId = dialogTableValue.id
    Object.keys(formMy).forEach((key:any) => {
      formMy[key] = dialogTableValue[key];
    });
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-form-item__content {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-rate__item {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
